<template>
    <el-container v-loading="loading">
        <div class="container">
            <div class="item" v-for="(item, index) in softwareList">
                <h1>
                    {{ index + 1 }}.
                    <a :href="item.fields.url" target="_blank">{{ item.fields.name  }}</a>
                </h1>
                <div class="item-desc">
                    <!-- <div class="img-container">
                        <el-image class="software-img" :src="baseUrl + item.fields.src" fit="contain" />
                    </div> -->
                    <div class="item-description">
                        {{ item.fields.description }}
                    </div>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script lang="ts" setup>

import { get, post } from '../../axios/api';
    import { onBeforeMount, ref } from 'vue';
    import { ElMessage, rowProps } from 'element-plus'

    let softwareList:any = ref([])
    let loading = ref(false)
    const baseUrl = import.meta.env.VITE_BASE_URL

    async function getData() {
        let res:any = {}
        try {
            res = await post('/get_softwares/', )
            if (res && res.success) {
                softwareList.value = res.list
                loading.value = false
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }
    
    onBeforeMount(() => {
        getData()
    })
</script>

<style scoped>
    .container {
        width: 100%;
        margin: 20px;
    }
    
    .item {
        width: 100%;
        margin: auto;
    }

    a {
        text-decoration: none;
        color: #008AFF;
    }
    
    a :hover {
        color: #006621;;
    }

    .item-desc {
        width: 100%;
        display: flex;
        justify-content: start;
    }

    .software-img {
        width: 70%;
        height: 150px;
    }

    .item-description {
        font-family: Arial, sans-serif;
        width: 100%;
        line-height: 1.5;
        font-size: large;
    }

    .img-container {
        width: 30%;
        margin-right: 20px;
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
            margin: 20px;
        }

        .item-description {
            width: 100%;
        }
    }
</style>